<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            cursor: pointer;
        }
    </style>
</head>
<img src="img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg " alt="" id="img1">
<img src="img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg " alt="" id="img2">
<img src="img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg " alt="" id="img3">
<img src="img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg " alt="" id="img4">
<img src="img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg " alt="" id="img5">
<p></p>

<body>
    <script>
        var p = document.querySelector("p")
        //点亮星星
        var img1 = document.getElementById("img1")
        img1.onclick = function () {
            img1.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            p.innerHTML = "1颗星"
        }
        var img2 = document.getElementById("img2")
        img2.onclick = function () {
            img1.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            img2.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            p.innerHTML = "2颗星"
        }
        var img3 = document.getElementById("img3")
        img3.onclick = function () {
            img1.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            img2.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            img3.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            p.innerHTML = "3颗星"
        }
        var img4 = document.getElementById("img4")
        img4.onclick = function () {
            img1.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            img2.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            img3.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            img4.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            p.innerHTML = "4颗星"
        }
        var img5 = document.getElementById("img5")
        img5.onclick = function () {
            img1.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            img2.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            img3.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            img4.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            img5.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_03.jpg";
            p.innerHTML = "5颗星"
        }
        //取消点亮
        img1.ondblclick = function () {
            img1.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            p.innerHTML = "0颗星"
        }
        img2.ondblclick = function () {
            img1.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            img2.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            p.innerHTML = "0颗星"
        }
        img3.ondblclick = function () {
            img1.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            img2.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            img3.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            p.innerHTML = "0颗星"
        }
        img4.ondblclick = function () {
            img1.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            img2.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            img3.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            img4.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            p.innerHTML = "0颗星"
        }
        img5.ondblclick = function () {
            img1.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            img2.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            img3.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            img4.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            img5.src = "img/b015df4c7ddb8888d3be4c8bed7c87f1_04.jpg ";
            p.innerHTML = "0颗星"
        }
    </script>
</body>

</html>